<template>
  <div id="app">
    <!-- 头部内容 -->
    <div class="header">
      <van-tabbar v-model="active">
        <van-tabbar-item>
          <router-link to="/home">
            <img src="./assets/images/baidu.jpg" alt class="logoPng" />
          </router-link>
        </van-tabbar-item>
        <van-tabbar-item>
          <router-link to="/singer">歌手</router-link>
        </van-tabbar-item>
        <van-tabbar-item>
          <router-link to="/billboard">榜单</router-link>
        </van-tabbar-item>
        <van-tabbar-item>
          <router-link to="/mine">我的</router-link>
        </van-tabbar-item>
        <van-tabbar-item>
          <router-link to="/search">搜索</router-link>
        </van-tabbar-item>
      </van-tabbar>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: 0
    };
  },
  methods: {}
};
</script>

<style>
.van-tabbar--fixed {
  top: 0;
  /* background-color: #f9f9f9; */
  height: 50px;
  color: #999 !important;
  background-color: #f9f9f9;
}
.van-tabbar-item__text {
  font-size: 16px;
}
.logoPng {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.header{
  height: 50px;
}
.header a{
  color: #999;
}
</style>
